<template>
    <div class="page rdsp-fix-botttom-page" data-page="tbpass" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">核实</div>
        </div>
        <div class="page-content">
            <div id="keyAlarmPic_tbpass_{{getNewId}}" style="margin: 10px 20px;"></div>
            <div class="form-hiddenDanger">
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block">
                        <div class="left-title fl"><span class="red">*</span>描述</div>
                        <div class="right-con">
                            <textarea id="troubleText_{{getNewId}}" class="right-con-textarea cancle-ios-write"
                                placeholder="请填写核实描述"></textarea>
                            <div class="voice">
                                <div id="tbpass_voice_{{getNewId}}" class="voice-before">
                                    <i class="iconfont icon-yuyin1"></i>点击语音输入
                                </div>
                                <div class="voice-after" style="display: none">
                                    <div class="voice-after-time"><i class="iconfont icon-yuyin-copy"></i></div>
                                    <div class="delete"><i class="iconfont icon-icon-shanchu-copy"></i></div>
                                </div>
                                <div class="bohui-btn" @click="savaRectification">
                                    <span>核实</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        mounted() {
            var self = this;
            var $ = self.$;
        },
        beforeCreate() {
            var self = this;
            var $ = self.$;

        },
        data: function () {
            return {
                imageArr: [],
                picUrls: '',
                getNewId: (new Date()).getTime(),
            }
        },
        methods: {
            //启动语音
            voidStart_detail: function () {
                var self = this;
                self.voiceFlag = true;
                native.startVoice("troubleText_"+self.getNewId, true);
            },
            //语音输入回调
            voiceCollectionData: function (voiceStr, componentId) {
                var text = $("#" + componentId)[0].value;
                if (!voiceStr || "" === voiceStr.trim()) {
                    app.methods.showToastCenter("未能识别您说的语音,请重试。");
                } else {
                    $("#" + componentId).val(text + voiceStr);
                }
            },
            savaRectification:function(status){
                var self = this;
                self.status = status;
                if (self.voiceFlag){
                    self.voiceFlag = false;
                    native.saveTheVoiceFile(self.$route.params.orgId*1);
                } else {
                    if(getClickEnabel(4000)){
                        self.callbackVoiceFile("",0);
                    }
                }
            },
            //接受原生的语音Url
            callbackVoiceFile:function(voiceUrl,wavLength) {
                var self = this;
                var text = $("#troubleText_"+self.getNewId)[0].value;
                //核实页面的图片非必填
                // if (self.imageArr.length == 0) {
                //     app.methods.showToastCenter('请上传图片');
                //     return;
                // }
                if (text == "") {
                    app.methods.showToastCenter('请填写核实说明');
                    return;
                }
                common.loading(1);
                self.picUrls = self.imageArr.join(",")

                Dao.troubleback({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    orgId: self.$route.params.orgId,
                    hiddenDangerId: self.$route.params.hiddenDangerId,
                    picUrls: self.picUrls,
                    type: 1,
                    gradeId: self.$route.params.gradeId,
                    categoryId: self.$route.params.categoryId,
                    status: 2,
                    createAccount: userInfor.accountName,
                    createAccountName: userInfor.name,
                    detailDesc: text,
                    detailVoiceUrl:voiceUrl,
                    detailVoiceLength:wavLength
                }, function (data) {
                    common.loading(0);
                    app.methods.showToastCenter('核实通过');
                    indexHiddenDangerStatus = 1;
                    hiddenDangerListStatus = 1;
                    common.loading(1);
                    app.router.back();
                    //核实列表
                    // jQuery(".troubleApply-type div").eq(2).click();
                    // app.view.current.el.f7View.router.currentPageEl.f7Component.getHiddenNum();
                });
            },
            tb_cancel: function () {
                app.router.back();
            },

        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                var $ = self.$;
                hiddenDangerListStatus = 1;
                // jQuery(".form-hiddenDanger .rdsp-inner-title").click(function (e) {
                //     jQuery(e.currentTarget).parent().toggleClass("show");
                //     jQuery(e.currentTarget).siblings(".rdsp-inner-content").slideToggle();
                // })
                self.imageArr = [];
                //初始化上传
                upLoadImagesCompt(jQuery("#keyAlarmPic_tbpass_"+self.getNewId), function (pic, isAdd) {
                    let _pic = common.addWatermark(pic)
                    if (isAdd == "add") {
                        self.imageArr.unshift(_pic);
                    } else {
                        let index = self.imageArr.indexOf(_pic);
                        self.imageArr.splice(index, 1);
                    }
                }, true, null, 'keyAlarmPic_container_' + self.getNewId, 'keyAlarmPic_pick_' + self.getNewId,'添加现场图片',true);

                //绑定语音输入驳回理由
                jQuery("#tbpass_voice_"+self.getNewId).click(function (e) {
                    //第二个参数是否需要保存语音
                    if (getClickEnabel(4000)) {
                        app.view.current.el.f7View.router.currentPageEl.f7Component.voidStart_detail()
                    };
                });
            },
            pageAfterIn: function (e, page) {
                var self = this;

            },
            pageBeforeRemove: function (e, page) {

            }
        }
    }
</script>

<style scoped>
    .cus_wup {
        float: left;
        padding-left: 0px;
    }

    .inp_cus {
        width: 100%;
        height: 165px;
    }

    .up_cus {
        margin: 6px;
        position: relative;
        float: left;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
    }

    .ul_cus {
        padding: 3px;
        float: left;
    }

    .cus {
        height: 100px;
        padding-left: 18px;
    }

    /* #file {
        font-size: 1px;
        top: 0px;
        left: 0px;
        opacity: 0;
        width: 100px;
        height: 100px;
        display: block;
        color: #999999;
    } */

    .add_image {
        position: absolute;
        top: 8px;
        width: 100px;
        height: 100px;
    }

    /* #line_width {
        width: 100%;
        height: auto;
    } */

    .del {
        width: 14px;
        height: 14px;
        right: 5px;
        position: absolute;
    }

    .button-fill {
        width: 91% !important;
        height: 44px !important;
        margin: 0 auto;
        background: linear-gradient(to top, #238afb, #40affe);
        line-height: 0px;
        font-size: 16px;
    }

    /* #kalarm .messagebar-attachments {
        border-bottom: 1px solid rgba(221, 221, 221, 0.5);
    } */

    .select-right {
        width: 13px;
        height: 13px;
        background: url(./img/common/select.png);
        background-repeat: no-repeat;
        float: left;
        position: absolute;
        vertical-align: middle;
        background-size: 100%;
    }

    .demo-swiper .swiper-slide {
        font-size: 25px;
        font-weight: 300;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        color: #333333;
    }

    .demo-swiper .swiper-slide {
        box-sizing: border-box;
        /* border: 1px solid #ddd; */
        background: #fff;
    }

    .demo-swiper {
        margin: 0px 0 35px;
        font-size: 18px;
        height: 200px;
    }

    .demo-swiper.demo-swiper-auto .swiper-slide {
        width: 85%;
    }

    .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(2n) {
        width: 70%;
    }

    .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(3n) {
        width: 30%;
    }

    .BMap_cpyCtrl {
        display: none;
    }

    .anchorBL {
        display: none;
    }

    #line_width ul {
        display: inline-flex;
    }

    .messagebar-attachments {
        padding: 0px !important;
        padding-left: 18px;
    }

    .bohui-btn {
        background: #2196f3;
        color: #fff;
        font-size: 16px;
        text-align: center;
        margin: 30px 16px;
        line-height: 35px;
    }
</style>
